<template>
  <div class="question">
    <img class="bg" src="/static/imgs/test.jpg" alt>
    <div class="qs_content" v-if="questions.length > 0">
      <div v-if="!startqs">
        <p class="title">温馨提示:</p>
        <div class="warn_tag">为了更好的为您制定学习计划,请首先回答以下问题, 我们会为您量身推荐相关的课程.</div>
      </div>
      <div v-else>
        <p class="title">{{questions[currentIndex].title}}</p>
        <div
          class="response"
          v-for="(item,index) in questions[currentIndex].option"
          :key="index"
          @click="selectAnswer(index)"
        >
          <img v-if="item.select" src="/static/imgs/selected.jpg" alt>
          <img v-else src="/static/imgs/unselect.jpg" alt>
          <span>{{item.label}}</span>
        </div>
      </div>
    </div>
    <button :disabled="disabled" @click="btn_click" class="qs_btn">{{btn_title}}</button>
  </div>
</template>

<script>
export default {
    data(){
        return {
            questions: [],
            startqs: false, // 是否显示问题列表
            currentIndex: 0, // 记录当前回答到第几道题
            btn_title: "开始答题", // 按钮的title
            lesson: "" // 记录提交的问题
        }
    },
    onLoad(){
        this.getData();
    },
    computed: {
        disabled(){   //控制button是否可用
            if(!this.startqs) return false;
            else{
                const option = this.questions[this.currentIndex].option;
                let select = false;
                option.forEach(item => {
                    if(item.select) select = true;
                })
                return !select;
            }
        }
    },
    methods: {
        getData(){
            this.$https.request({
                url: this.$interfaces.getQuestions,
                method: 'get'
            }).then(res => {
                this.questions = res.questions
            })
        },
        btn_click() {
            // 如果没有开始测试(this.startqs为false) 按钮标题默认显示’开始答题’
            //如果已经开始测试 判断是否为最后一题（this.currentIndex == this.questions.length - 1）
            //如果不是最后一题，按钮标题为’下一题’ 否则显示’完成’
            if(!this.startqs){
                this.startqs = true;
                this.btn_title = "下一题";
            }else{
                //获取选项的 字符串
                this.lesson += this.getSelectOption();
                if(this.currentIndex < this.questions.length - 1){
                    this.btn_title = "下一题";
                    this.currentIndex++;
                    //拼接逗号   是,vue,node
                    this.lesson += ',';
                    if(this.currentIndex == this.questions.length - 1){
                    this.btn_title = "完成";
                    }
                }else{
                    //拿到调查结果，获取对应的课程
                    this.sendQuestions();
                }
            }
        },
        selectAnswer(index){   //控制切换图片
            const option = this.questions[this.currentIndex].option;
            option.forEach(item => {
                item.select = false;
            })
            option[index].select = !option[index].select;
        },
        getSelectOption(){
            const option = this.questions[this.currentIndex].option;
            let label = '';
            option.forEach(item => {
                if(item.select) label += item.label;
            })
            return label;
        },
        sendQuestions(){
            this.$https.request({
                url: this.$interfaces.myLesson,
                method: 'post',
                data: {
                    lesson: this.lesson,
                    uesrId: this.$store.getters.openid
                }
            }).then(res => {
                //存储课程信息
                this.$store.dispatch('setLessonInfo', res);
                wx.switchTab({
                    url: '../learn/main',
                })
            })
        }
    },
    
}
</script>

<style scoped>
.question {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.question .bg {
  width: 100%;
  height: 100%;
}
.qs_content {
  position: absolute;
  width: 80%;
  height: 50%;
  background: #fff;
  top: 36%;
  left: 10%;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 10px;
  color: rgb(13, 28, 51);
}
.qs_btn {
  position: absolute;
  top: 90%;
  left: 10%;
  width: 80%;
  background-color: #009eef;
  color: white;
}
.title {
  font-weight: bold;
  margin-bottom: 20px;
  word-break: break-all;
}
.warn_tag {
  padding: 40px 10px;
}
.response {
  padding: 10px;
}
.response img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
</style>